<template>
  <div class="header">

    <div ref="chart1" class=" chart1"></div>
    <div ref="chart2" class=" chart1"></div>
  </div>
  <div class="">
    <el-table :data="filterTableData" style="width: 100%">
            <el-table-column label="编号" prop="id" />
      <el-table-column label="下单时间" prop="createTime" />
      <el-table-column label="封面">
        <template #default="scope">
          <img style="width: 80px;" :src="scope.row.coverSrc" alt="">
        </template>
      </el-table-column>
      <el-table-column label="名字" prop="userName" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="手机名" prop="phoneName" />
      <el-table-column label="内存" prop="memory" />
      <el-table-column label="硬盘" prop="disk" />
      <el-table-column label="价格" prop="price" />


      <el-table-column label="状态">
        <template #default="scope">
          

          <el-tag
          :type="scope.row.logistics === '0' ? 'error' :scope.row.logistics == '1' ? 'success' :  'primary' "
          disable-transitions
          > {{ scope.row.logistics == '0' ? '未发货' : scope.row.logistics == '1' ? "已发货" : '已签收' }}</el-tag
        >
        </template>
      </el-table-column>

      <el-table-column label="价格">
        <template #default="scope">
          <el-button type="success" :disabled="scope.row.logistics !== '0'" @click="send(scope.row.id)">发货</el-button>
        </template>
      </el-table-column>

      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="搜索" />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <div class="footer">
      <el-pagination @current-change="currentChange" :total="totalValue" :default-current-page="1"
        v-model:current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" />
    </div>
  </div>
</template>

<script setup lang="ts">

import { ElMessage } from 'element-plus';
import { computed, ref, onMounted } from 'vue'
import { orderList, charge, orderCount ,sendApi} from '../../api/user'
import * as echarts from 'echarts';
import { getBrandCount, getBrandPrice } from '../../api/chart/index'

const chart1 = ref()
const chart2 = ref()
const totalValue = ref()
const pageSize = ref(6)
const currentPage = ref(1)
const chargeDialog = ref(false)
const chargeUser = ref({
  userName: '',
  money: 0
})

const search = ref('')


onMounted(() => {
  var myChart = echarts.init(chart1.value);
  var myChart2 = echarts.init(chart2.value);
  // 基于准备好的dom，初始化echarts实例
  // 绘制图表
  getBrandCount().then(res => {

    myChart.setOption({
      title: {
        text: '各个品牌的销量'
      },
      tooltip: {},
      xAxis: {
        data: res.data.data.brands
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: res.data.data.nums
        }
      ]
    });
  })

  getBrandPrice().then(res => {


    // myChart2.setOption({
    //   title: {
    //     text: '各个品牌的营业额'
    //   },
    //   tooltip: {},
    //   xAxis: {
    //     data: res.data.data.brands
    //   },
    //   yAxis: {},
    //   series: [
    //     {
    //       name: '销量',
    //       type: 'bar',
    //       data: res.data.data.prices
    //     }
    //   ]
    // });

     myChart2.setOption( {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: res.data.data
    }
  ]
});




  })

})


const send = (id: string) => {
  sendApi(id).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success'
      })
      orderList((currentPage.value - 1) * pageSize.value, pageSize.value).then(res => {
        tableData.value = res.data.data
        console.log(tableData.value);

      })
    }
  })
}

const filterTableData = computed(() =>
  tableData.value.filter(
    (data: any) =>
      !search.value ||
      data.userName.toLowerCase().includes(search.value.toLowerCase())
  )
)


const currentChange = (page: number) => {
  orderList((page - 1) * pageSize.value, pageSize.value).then(res => {
    tableData.value = res.data.data
    console.log(tableData.value);

  })
}
orderCount().then(res => {
  totalValue.value = res.data.data
  console.log(totalValue.value + '------------');

})

orderList(0, pageSize.value).then(res => {
  tableData.value = res.data.data
  console.log(tableData.value);

})

const handleEdit = (index: number, row: any) => {
  console.log(index, row)
  chargeUser.value.userName = row.userName
  chargeDialog.value = true;
}

const doCharge = () => {
  charge(chargeUser.value).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success'
      })
      chargeDialog.value = false
      orderList((currentPage.value - 1) * pageSize.value, pageSize.value).then(res => {
        tableData.value = res.data.data
        console.log(tableData.value);

      })
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'error'
      })
    }
  })
}
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
}

const tableData = ref<Array<any>>([])
</script>

<style scoped >
.footer {
  width: 700px;
  margin: 0 auto;
}

.header {
  height: 300px;
  display: flex;
  justify-content: space-between;
}

.chart1 {
  height: 300px;
  width: 500px;

}
</style>